<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 50px;
        }
        main {
            min-width: 900px;
            max-width: 1600px;
            margin: 0 auto;
        }

        details summary {
            cursor: pointer;
            /*display: inline-block;*/
        }

        details summary:focus {
            outline: none;
        }

        details summary.important {
            color: rgba(255, 0, 0, 0.618);
        }
    </style>
</head>
<body>
<main>
    <details>
        <summary>图像文件类型类型与格式</summary>
        <ol>
            <li>
                <p>
                    <a title="图像文件类型与格式指南 - Web 媒体技术 | MDN"
                       href="https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types">mdn</a>
                </p>
            </li>
        </ol>

    </details>
    <details>
        <summary>webp 介绍</summary>
        <ol>
            <li>
                <p>
                    WebP通过基于VP8视频编解码器的预测编码支持有损压缩，以及使用重复数据替换的无损压缩。有损WebP图像平均比JPEG图像小25-35%，在视觉上具有相似的压缩级别。无损WebP图像通常比PNG格式的相同图像小26%。

                    WebP也支持动画:在有损耗的WebP文件中，图像数据由VP8位流表示，其中可能包含多个帧。无损WebP保存ANIM块(描述动画)和ANMF块(表示动画序列的一帧)。支持循环。

                    WebP现在在主流网络浏览器的最新版本中得到了广泛的支持，尽管它在历史上没有得到深入的支持。提供JPEG或PNG格式的后退，例如使用 &lt;picture&gt;元素。
                </p>
            </li>
            <li>
                <p>WebP 是由 Google 公司开发的一种可提供有损和无损压缩的图片格式，支持透明度，目前已支持动图。</p>

            </li>
            <li>
                <button onclick="isSupportWebp()">支持检测</button>
                <div id="id1"></div>
            </li>
            <li>
                <picture>
                    <source type="image/webp"
                            srcset="https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75_.webp"/>
                    <img src="https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75.jpg">
                </picture>
            </li>
        </ol>

    </details>

    <details>
        <summary>头条文章地址</summary>
        <a title="原始文章地址" href="https://www.toutiao.com/article/7040368431274885646/?app=news_article&timestamp=1668332518&use_new_style=1&req_id=202211131741580101400481402499C7B4&group_id=7040368431274885646&share_token=3FDC4B45-B79E-4BF6-A437-A7513EF463C8&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1&source=m_redirect&wid=1668333322319
">头条</a>
    </details>
</main>


</body>
<script>
    async function isSupportWebp() {
        const imgUrl = 'https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75_.webp';
        const image = new Image();
        image.src = imgUrl;


        image.onload = function () {
            // 加载成功，说明支持 webp
            document.getElementById('id1').appendChild(image)
            return true;
        }
        image.onerror = function () {
            // 加载失败，说明不支持 webp
            return false;
        }

    }

    function isSupportWebp2() {
        const str = document.createElement('canvas').toDataURL('image/webp');
        // 如果支持则会返回传入的类型 image/webp -->
        // 
        // 如果不支持则会返回默认值
        // image/png --> 
        return str.indexOf('image/webp') > -1;
    }

    /** * 选择浏览器支持的图片格式 */
    function getImg(compressedImg, originalImg) {
        const isSupport = isSupportWebp();
        return isSupport ? compressedImg : originalImg;
    }

    console.log(getImg(1, 2));

</script>
</html>
